<template>
  <div id="member_info">

    <div class="basic_message">
      <h2>基本信息</h2>
      <div class="basic_message_box">
        <div class="basic_left">
          <img :src="userObj.userPortrait?userObj.userPortrait:'https://oss.yhuayi.com/sixth-qianfeng/back/weidenglu.png'" />
        </div>
        <div class="basic_right">
          <ul>
            <li>昵称:{{userObj.nickname}}</li>
<!--            <li>性别:{{userObj.adminSex?parseInt(userObj.adminSex)?'女':'男':'保密'}}</li>-->
            <li>性别:{{parseInt(userObj.adminSex)?'女':'男'}}</li>

            <li>账号:{{userObj.username?userObj.username:'保密'}}</li>
            <li>生日:{{userObj.createTime?userObj.createTime:'保密'}}</li>
          </ul>
        </div>
      </div>
      <h2>照片</h2>
      <div class="basic_prc_box">
<!--        <div v-for="item of imgList"-->
<!--             class="basic_prc_image"-->
<!--             :key="item"-->
<!--             :style="{'background-image':`url(${item})`}"></div>-->
        <img v-for="(item,index) of imgList" class="basic_prc_img" :src="item" :key="index"/>
      </div>
    </div>

  </div>
</template>

<script>
import {getUserById} from "../../../network/admin";
// import {dateFormat} from "@/utils/date";

export default {
  name: "memberInfo",
  data(){
    return{
      userObj:{},
      imgList:[
          'https://bucket-yufei.oss-cn-beijing.aliyuncs.com/my_self/image/image02.jpg',
          'https://bucket-yufei.oss-cn-beijing.aliyuncs.com/my_self/image/fisrtbg.jpg',
      ]
    }
  },
  created() {
    this.getUser();
  },
  methods:{
    /**
     * 当我们使用动态路由时,发现created不会再次被执行,这个时候,我们就需要
     * 定义一个方法,执行查询操作,来监听路由的变化.
     */
    getUser(){
      //通过路由获取用户id
      console.log(this.$route.params.index)
      getUserById(this.$route.params.index).then((result)=>{
        console.log(result);
        this.userObj=result.data.data;
      }).catch((reason)=>{
        console.log(reason);
      });
    },
  },
  watch:{
    "$route":'getUser'
  }
}
</script>

<style scoped>
#member_info{
  position: relative;
  width: 100%;
}
.basic_message{
  width: 100%;
  /*height: 300px;*/
  font-family: 苏新诗柳楷简;
}
.basic_message h2{
  line-height: 60px;
  font-family: 苏新诗柳楷简;
  font-size: 45px;
  border-bottom: 2px solid #8c939d;
}

.basic_message_box{
  display: flex;
  justify-content: space-between;
  margin: 20px 0 50px;

}
.basic_left{
  width: 45%;
  text-align: right;
}
.basic_left img{
  width: 200px;
  height: 200px;
  border-radius: 10px;
}
.basic_right{
  width: 45%;
  text-align: left;
}
.basic_right ul{
  line-height: 50px;
  font-size: 25px;
}


.basic_prc_box{
  display: flex;
  padding: 20px;
  flex-wrap: wrap ;
}
/*.basic_prc_image{*/
/*  width: 300px;*/
/*  height: 300px;*/
/*  border-radius: 20px;*/
/*  background-size: 100% 100%;*/
/*}*/
.basic_prc_img{
  height: 300px;
  margin: 10px 50px;
}

</style>
